<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/layui.mobile.css">
  <link rel="stylesheet" href="../css/bayhorse.css">
  <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
  <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
  <title>我要买马</title>
</head>
<body>
  <!-- 导航条检索开始部门 -->
  <div class="horse"  id="nav">
    <div class="horse-wars">
      <section class="horse-cont layui-inline layui-center">
        马匹品种
      </section>
      <span class="layui-breadcrumb">
        <a href="" v-for="varietie in varieties">{{ varietie.message }}</a>
      </span>
    </div>
    <div class="horse-wars">
      <section class="horse-cont layui-inline layui-center">
        马匹能力
      </section>
      <span class="layui-breadcrumb">
        <a href="" v-for="ability in abilitys">{{ ability.message }}</a>
      </span>
    </div>
    <div class="horse-wars">
      <section class="horse-cont layui-inline layui-center">
        马匹年龄
      </section>
      <span class="layui-breadcrumb">
        <a href="" v-for="horseage in horseages">{{ horseage.message }}</a>
      </span>
    </div>
    <div class="horse-wars">
      <section class="horse-cont layui-inline layui-center">
        适合骑手
      </section>
      <span class="layui-breadcrumb">
        <a href="" v-for="rider in riders">{{ rider.message }}</a>
      </span>
    </div>
    <!-- 导航条检索结束部分 -->
    <!-- 水平线 -->
    <section class="layui-bg-cyan"></section>
    <!-- 更多选择开始部分 -->
    <div class="more-cont layui-inline">
        <section class="more-mor layui-inline">
          更多选择
        </section>
        <ul class="more-ul" v-on:click="more_ul()">
          <p>颜色</p>
        <a href=""><li v-show="isShow" v-for="horse_color in horse_colors">{{ horse_color.message }}</li></a>
        </ul>
    </div>
    <!-- 更多选择结束部分 -->
    <!-- 水平线 -->
    <section class="layui-bg-cyan"></section>
    <div>
      <div class="horse-img" v-for="horse_content in horse_contents">
        <section class="horse-img-cont">
          <section class="horse-img-one">
            {{ horse_content.img }}
          </section>
          <div class="horse-img-bot">
            <article class="layui-inline">
              <span>品种:</span>
              <span>{{ horse_content.varieties }}</span>
            </article>
            <article class="layui-inline">
              <span>年龄:</span>
              <span>{{ horse_content.age }}</span>
            </article>
            <article class="horse-font">
              <span>技能:</span>
              <span>{{ horse_content.skill }}</span>
            </article>
          </div>
      </div>
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el: '#nav',
        data: {
          varieties: [
            { message: '西伯利亚马',value: '西伯利亚马' },
            { message: '蒙古马',value: '蒙古马' },
            { message: '瑞士马',value: '瑞士马' },
            { message: '混血马',value: '混血马' },
            { message: '夸特马',value: '夸特马' },
            { message: '阿拉伯马',value: '阿拉伯马' },
            { message: '改良马',value: '改良马' },
            { message: '安达卢西亚马',value: '安达卢西亚马' }
          ],
          abilitys: [
            { message: '竞速马' },
            { message: '盛装舞步' },
            { message: '教学马' },
            { message: '障ai' },
            { message: '马球' },
            { message: '工作用马' }
          ],
          horseages: [
            { message: '0-1' },
            { message: '1-3' },
            { message: '3-5' },
            { message: '5-7' },
            { message: '7-9' },
            { message: '9+' }
          ],
          riders: [
            { message: '儿童' },
            { message: '新手' },
            { message: '爱好者' },
            { message: '发烧友' },
            { message: '半职业' },
            { message: '职业选手' }
          ],
          horse_contents: [
            {
              img: '这个是一张图片',
              varieties: '西波利亚马',
              age: '14岁',
              skill: 'afadfadsfadfasdfadfdfs'
            }
          ],
          horse_colors: [
            { message: '白色' },
            { message: '褐色' },
            { message: '灰色' },
            { message: '灰色'}
          ],
          isShow: false
        },
        methods: {
          more_ul: function () {
            this.isShow = !this.isShow;
          },
        }
      });
    </script>
</body>
</html>
